// src/components/popups/userActions/Settings.tsx

import { useState } from 'react';
import type { FC } from 'react';
import { IoSettingsOutline } from 'react-icons/io5';
import UpdateInfo from '@/components/popups/userActions/UpdateInfo';
import ChangePwd from '@/components/popups/userActions/ChangePwd';
import { useUserStore } from '@/store/userStore';

interface SettingsProps {
  onClose: () => void;
  onUpdateUser: (updated: {
    first_name?: string;
    last_name?: string;
    email?: string;
  }) => void;
}

const Settings: FC<SettingsProps> = ({ onClose, onUpdateUser }) => {
  const [view, setView] = useState<'menu' | 'info' | 'password'>('menu');
  const { user } = useUserStore();
  const { firstName, lastName, email } = user;

  return (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60 dark:bg-black/80 backdrop-blur-sm px-1 py-4 sm:p-6 animate-fade-in font-poppins"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-md w-[95%] max-h-[80vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-3xl shadow-2xl dark:shadow-blue-900 border border-gray-200 dark:border-slate-800 animate-fade-in-up transition-all duration-300"
        onClick={e => e.stopPropagation()}
      >
        {/* Header */}
        <div className="relative bg-white dark:bg-slate-900 text-gray-800 dark:text-cyan-200 px-4 py-4 flex items-center gap-4 border-b border-gray-200 dark:border-slate-800 rounded-t-3xl shadow-sm">
          <IoSettingsOutline size={54} className="text-blue-600 dark:text-cyan-400 drop-shadow-sm" />
          <div>
            <h2 className="text-lg sm:text-2xl font-extrabold text-blue-700 dark:text-cyan-300 leading-tight tracking-tight">
              User Settings
            </h2>
            <p className="text-xs sm:text-base text-gray-500 dark:text-cyan-200 font-semibold">
              {firstName} {lastName}
            </p>
          </div>
        </div>
        {/* Dynamic content section */}
        {view === 'menu' ? (
          <div className="p-2 sm:p-6 text-gray-800 dark:text-gray-100 font-poppins">
            <h2 className="text-lg sm:text-2xl font-extrabold text-blue-700 dark:text-cyan-300 text-center tracking-tight mb-6">
              Settings Menu
            </h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
              <button
                onClick={() => setView('info')}
                className="w-full py-2.5 rounded-xl font-semibold text-xs sm:text-base bg-blue-600 dark:bg-cyan-700 hover:bg-blue-700 dark:hover:bg-cyan-800 text-white shadow-md transition"
              >
                Update Info
              </button>
              <button
                onClick={() => setView('password')}
                className="w-full py-2.5 rounded-xl font-semibold text-xs sm:text-base bg-blue-500 dark:bg-cyan-600 hover:bg-blue-600 dark:hover:bg-cyan-700 text-white shadow-md transition"
              >
                Change Password
              </button>
              <button
                onClick={onClose}
                className="w-full sm:col-span-2 py-2.5 rounded-xl text-gray-600 dark:text-gray-200 hover:text-black dark:hover:text-cyan-300 text-xs sm:text-base border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 mt-2 transition"
              >
                Cancel
              </button>
            </div>
          </div>
        ) : view === 'info' ? (
          <UpdateInfo
            firstName={firstName}
            lastName={lastName}
            email={email}
            onClose={() => setView('menu')}
            onUpdateUser={onUpdateUser}
          />
        ) : (
          <ChangePwd onClose={() => setView('menu')} />
        )}
      </div>
    </div>
  );
};

export default Settings;